<script setup>
import{storeToRefs} from 'pinia'
import {ref,onMounted,watch} from 'vue'
import { Sunny } from '@element-plus/icons-vue'
import { InfoFilled } from '@element-plus/icons-vue'
import {useCounterStore} from '@/stores/counter'
import { useRouter } from 'vue-router'
import { getUsersApicity,getUsersApi  } from '../api/respont'
const router = useRouter()
const store = useCounterStore()
const {localcode,weatherTody,items,echartDays,echartNight,option,citylist1} = storeToRefs(store)
const {weatherall,weathertoday,optionget,weatherallcode,delList} =store
const istrue = ref(false)
const isword = ref(false)
const isshow =ref(false)
const tipshow =ref(false)
const tipiconshow=ref(false)
const serchcity =ref()
const weekdata = ref(["/","周一","周二","周三","周四","周五","周六","周日",])
const cityname= ref('')
const serchname = ref()
// 判定搜索框的显示与隐藏
const handleClick=(event)=>{
// console.log(event.target.value)
if(event.target.value){
    isword.value=true
    serchcity.value=event.target.value
}else{
    isword.value=false
}
}
// 实现搜索页面的跳转与code传递
const  handleCity= async (name)=>{
  const res = await  getUsersApicity(name)
  console.log(res,'reslook')
//   console.log(res.geocodes[0].adcode,'pag2')
  if(res.status==1){
    console.log('成功')
    const id=res.geocodes[0].adcode
    router.push({ name: 'son', params: { id,}})
  }else{
    console.log('失败')
    serchcity.value='请输正确的城市名称'
  }
}
// 实现查看页面的跳转
const handleLook=(id)=>{
    router.push({ name: 'son', params: { id,}})
}
// 获取本地adcode
const  adcode= async ()=>{
  const res = await  getUsersApi()
  localcode.value=res.adcode
  cityname.value=res.city
}

onMounted( async ()=>{

    // 自动刷新一次页面
    if (window.location.href.indexOf("#reloaded") == -1) {
        window.location.href = window.location.href + "#reloaded";
        window.location.reload();
    }

   weatherallcode()
   await adcode()
   await weatherall( localcode.value)
   await weathertoday( localcode.value)
         optionget()
})
</script>
<template>
    <div class="container">
        <div class="usetip" :class="tipshow ? 'tipactive1' : 'tipactive2'">
                <p class="title">关于</p>
                <p class="artic">这个应用可以用来追踪你选择城市的当前天气</p><br>
                <p class="title"> 如何使用:</p>
                <p class="artic">1.点击搜索框输入你希望追踪的城市<br>
                   2.在搜索结果中选中一个城市，你将获取当地最新的天气<br>
                   3.点击右侧的＋号可以将追踪城市的天气情况保存在首页<br>
                </p><br>
                <p class="title">移除城市:</p>
                <p class="artic">如果你不想在首页关注某个城市,可以通过底部的按钮删除它</p>
                <button  @click="tipshow=false" >关闭</button>
        </div>
        <div class="top">
            <div class="left">
                <div>
                    <router-link to="/" class="title">
                        <div class="icon" ><el-icon><Sunny /></el-icon></div>
                        <div class="tip">新中地天气</div>
                        <div class="city">{{cityname}}</div>
                    </router-link>
                </div>
                <div class="weather">
                    <div>实时天气：{{weatherTody.weather}}{{weatherTody.temperature}}℃</div>
                    <div>{{weatherTody.winddirection}}风{{weatherTody.windpower}}级</div>
                </div>

            </div>
            <div class="right" @click="tipshow=true" >
                <div class="tipicon" @click="tipshow=true" :class="tipiconshow ? 'tipiconactice2' :'tipiconactice1'"
                @mouseover="tipiconshow=true" @mouseout="tipiconshow=false"> <el-icon><InfoFilled /></el-icon></div>
            </div>
        </div>
        <div class="main">
            <div class="box">
                <div class="input" :class="istrue ? '' : 'active1'">
                    <input type="text" placeholder="请输入城市名称" v-model="serchname" 
                    :class="istrue ? 'active' : '' "  @focus="istrue= true" @blur="istrue=false" @input="handleClick">
                </div>
                <div v-if="isword ==true" class="serchword" @click="handleCity(serchcity)">{{serchcity}}</div>

                <div class="div" style="overflow: auto; height: 100px;" v-if="citylist1[0]!=[]">
                <div class="citylist"   v-for="(item) in citylist1[0]" :key="item.rawValue" >
                    <div  class="word" :class="isshow ? 'wordactive' : 'wordactive1' " @mouseenter="isshow=!isshow"  >
                       <div class="city">{{item.name}}</div>
                       <div class="tem">{{item.value}}度</div>
                    </div>
                    <div  class="btn" v-if="isshow ==true" >
                        <button @click="handleLook(item.code)">查看</button>
                        <button @click="delList(item.code)">删除</button>
                    </div>
                </div>
            </div>
            <!-- <div style="text-align:center; color:aliceblue; font-size: 20px;margin-top: 40px" >暂时没有保存过城市天气信息，请查询后点击右上角"+"号保存。</div> -->
                <div class="recent" style="margin-top: 40px;color: aliceblue;"><span>近期天气</span></div>
                <div class="mainbox">
                    <div class="table">
                        <div class="tablelist" v-for="item in items" :key="item.id">
                           <div>{{weekdata[item.week]}}</div>
                           <div>{{ item.date.slice(5,10) }}</div>
                           <div>{{ item.dayweather }}</div>
                           <div>风力{{item.daypower}}级</div>
                        </div>
                       
                    </div>
                    <div class="echart">
                        <v-chart :option="option"> </v-chart>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
* {
    box-sizing: border-box;
}
.container {
    height: 2000px;
    background-color: rgba(0, 102, 138);
    height: 100vh;
    width: 100vw;
}
.container .usetip{
    position: absolute;
    top:7%;
    left:40%;
    width: 334px;
    height: 299px;
    padding: 20px;
    z-index: 1000;
    background-color:aliceblue
}
 .tipactive1{
    transition: all 1.5s;
    opacity: 1;
}
 .tipactive2{
    transition: all 1.5s;
    opacity: 0;
}

.container .usetip .artic{
    font-size: .75rem;
    line-height: 1rem;
}
.container .usetip button{
 margin-top: 15px;
 padding: .5rem 1.5rem;
 cursor: pointer;
 font-size: .75rem;
 color: aliceblue;
 border: none;
 background-color: rgba(0, 102, 138);
}

.top {
    width: 100%;
    height: 10%;
    box-shadow: 0 4px 16px -4px rgba(12, 12, 12, 0.3);
    display: flex;
    justify-content: space-around;
    justify-items: center;
    align-items: center;
    padding: 20px;
}

.top .left,.title,.weather{
    display: flex;
    gap: 20px;
    text-decoration: none;
    justify-items: center;
    align-items: center;
}
.title .icon,.tip{
    font-size: 1.5rem;
    color:aliceblue;
}
.title .city{
    font-size: 1.125rem;
    color:aliceblue;
}
.left .weather{
    font-size: .875rem;
    color:aliceblue;
}
.top .right{
    gap: 40px;
    display: flex;
    align-items: center;
    justify-items: center;
    font-size: 35px;
    color: aliceblue;
    cursor: pointer;
}
.tipiconactice1{
    opacity: 1;
    transition: 1.5s;
}
.tipiconactice2{
    opacity: 0.06;
    transition: 1s;
}

.main .box{
    width: 60%;
    height: 400px;
    margin: 0 auto;
    margin-top: 20px;
}
.inputactive{
    border-bottom: 1px solid wheat;
}
.box .input input{
    height: 40px;
    width: 100%;
    background-color: rgba(0, 102, 138);
    border: none;
    font-size: 17px;
    color: aliceblue;
    font-size: 20px;
}
.box .serchword{
    height: 50px;
    padding: 0 10px;
    margin-top: 5px;
    font-size: 20px;
    line-height: 40px;
    cursor: pointer;
    color: aliceblue;
    background-color: rgba(0, 78, 113);
}
.active1{
    border:transparent;outline:none;
    border-bottom: 1px solid wheat;
}
.active{
    box-shadow: 0 10px 16px -4px rgba(12, 12, 12, 0.3);
    border:transparent;outline:none;
}
.box .citylist {
    margin-top: 20px;
    display: flex;
    position: relative;
}
.box .citylist .word{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    height: 40px;
    color: aliceblue;
    font-size: 17px;
    background-color: rgba(0, 78, 113);
    transition:all  0.3s;
    cursor: pointer;
}
.wordactive{
    width:80%; 
}
.wordactive1{
    width:100%; 
}
.box .citylist .btn{
    display: flex;
    gap: 10px;
    position: absolute;
    right: 10px;
}
.citylist .btn button{
    height: 40px;
    width: 80px;
    border: none;
    cursor: pointer;
    font-size: 15px;
    color: aliceblue;
    background-color: rgb(234, 179, 8);
}
.box .mainbox{
    height: 400px;
    background-color: rgba(0, 78, 113);
    margin-top: 10px;
    padding: 4rem 10rem;
}
.box .mainbox .table{
    display: flex;
    justify-content: space-between;
    text-align: center;
    color: aliceblue;
}
.mainbox .table .tablelist{
    line-height: 40px
}
.mainbox .echart{
    padding: 0;
    margin-left:-90px;
    margin-top:30px;
    width: 1000px;
    height:180px;
}
</style>